<template>
    <div class="orderDetail flexv">
        <!-- 头部 -->
        <pubHead title="订单详情"></pubHead>

        <div class="tops flexv jus-c">
            <p class="title white" v-if="orderInfo.order_status == 0">交易关闭</p>
            <p class="title white" v-if="orderInfo.order_status == 10">待付款</p>
            <p class="title white" v-if="orderInfo.order_status == 20">待消费</p>
            <p class="title white" v-if="orderInfo.order_status == 40">待评价</p>
            <p class="title white" v-if="orderInfo.order_status == 50">交易成功</p>
			<p class="title white" v-if="orderInfo.order_status == 80">交易关闭</p>

            <p class="note white" v-if="orderInfo.order_status == 0">订单已取消</p>
            <p class="note white" v-if="orderInfo.order_status == 10">剩28分钟自动取消订单~</p>
            <p class="note white" v-if="orderInfo.order_status == 20">等待你来消费哦~</p>
            <p class="note white" v-if="orderInfo.order_status == 40">等待你来评价哦~</p>
            <p class="note white" v-if="orderInfo.order_status == 50">恭喜您顺利完成一笔订单~</p>
			<p class="note white" v-if="orderInfo.order_status == 80">订单已过期</p>
        </div>

        <div class="goods_infos flexv mt2">
            <p class="head">商品信息</p>

            <div class="goods_box flex">
                <img :src="orderInfo.ticket_image" class="goods_img" alt="">

                <div class="goods_info flex1 flexv jus-b">
					<div><p class="twoline title bold" style="color: #1989FA;">{{orderInfo.ticket_name}}</p></div>
					<div><p class="twoline">{{orderInfo.cate_name}}</p></div>
                    <span class="spec" v-if="orderInfo.scenic_ticket_name">{{orderInfo.scenic_ticket_name}}</span>

                    <div class=" ali-b jus-b others">
                        <span class="price" v-if="!orderInfo.marketing_type">￥{{orderInfo.ticket_price}}</span>
						<span class="price" v-if="orderInfo.marketing_type==2">秒杀价￥{{orderInfo.marketing_price}}</span>
						<span class="price" v-if="orderInfo.marketing_type==3">今日特价￥{{orderInfo.marketing_price}}</span>
						<span class="price" v-if="orderInfo.marketing_type==4">团购价￥{{orderInfo.marketing_price}}</span>
						<span class="price" v-if="orderInfo.marketing_type==5">团购价￥{{orderInfo.marketing_price}}</span>
						<span class="price" v-if="orderInfo.marketing_type==6">砍购价￥{{orderInfo.marketing_price}}</span>
						<span class="num">x{{orderInfo.total_num}}</span>
                    </div>
                </div>
            </div>

            <div class="totals jus-b ali-b">
                <span class="">实付款</span>
				<div>
					<span style="color: #808080;font-size: 0.28rem;" v-if="orderInfo.coupon_price>0">优惠{{orderInfo.coupon_price}}元</span>
					<span class="total_price">￥{{orderInfo.total_price}}</span>
				</div>
            </div>
        </div>

        <!-- 下单信息 -->
        <div class="link_infos flexv mt2">
            <div class="head">订单信息</div>
            <div class="link ali-c">
                <span class="name">联系人：</span>
                <span>{{orderInfo.consignee}}</span>
            </div>
            <div class="link ali-c">
                <span class="name">手机号：</span>
                <span>{{orderInfo.reserved_telephone}}</span>
            </div>
            <div class="link ali-c" v-if="orderInfo.idcard">
                <span class="name">身份证号：</span>
                <span>{{orderInfo.idcard}}</span>
            </div>
			<div class="link ali-c">
			    <span class="name">使用日期：</span>
			    <span>{{orderInfo.depart_date}}</span>
				<span>&nbsp;&nbsp;到&nbsp;&nbsp;</span>
				<span>{{orderInfo.valid_time}}</span>
			</div>
			<div class="link ali-c">
			    <span class="name">订单编号：</span>
			    <span>{{orderInfo.order_no}}</span>
			</div>
			<div class="link ali-c">
			    <span class="name">下单时间：</span>
			    <span>{{orderInfo.createtime}}</span>
			</div>
        </div>

        <!-- 核销信息 -->
        <div class="scan_infos flexv mt2" v-if="orderInfo.order_status == 50">
            <p class="head ali-c">核销信息</p>
            <p class="note ali-c">
                <span class="name">核销方式：</span>
                <span class="flex1">{{orderInfo.cancel_way == 1 ? '二维码': '核销码'}}</span>
            </p>
            <p class="note ali-c" v-if="orderInfo.cancel_way == 2">
                <span class="name">电子码：</span>
                <span class="flex1">{{orderInfo.cancel_time}}</span>
            </p>
           <!-- <p class="note ali-c">
                <span class="name">核销时间：</span>
                <span class="flex1">{{orderInfo.cancel_time}}</span>
            </p> -->
        </div>

     
        <!-- 底部按钮 -->
        <div class="bottom_acts">
            <div class="bottom_act jus-e">
                <div class="act tc" v-if="orderInfo.order_status == 10" @click="cancelOrder">取消订单</div>
                <div class="act tc active" v-if="orderInfo.order_status == 10" @click="toPay">立即支付</div>
                <div class="act tc active" v-if="orderInfo.order_status == 20" @click="toUse">立即消费</div>
                <div class="act tc active" v-if="orderInfo.order_status == 40" @click="toEva">去评价</div>
                <div class="act tc active" v-if="orderInfo.order_status == 50 || orderInfo.order_status == 0 || orderInfo.order_status == 80" @click="delOrder">删除订单</div>
            </div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import {  Toast, Dialog } from 'vant';
import { orderDetail, orderdel, ordercancel } from '@/request/api.js';
import pubHead from '@/components/head';

Vue.use(Toast,Dialog);
export default {
    data(){
        return{
            orderId: '', // 订单id
            orderInfo: '', // 订单信息
        }
    },
    components: {
        pubHead,
    },
    created(){
        this.orderId = this.$route.query.id;
        this.getData();
    },
    methods: {
        // 获取数据
        getData(){
            this.$loading();
            orderDetail({
                token: localStorage.getItem('token'),
                order_id: this.orderId
            }).then(res =>{
                Toast.clear();
                if(res.code == 1){
                    this.orderInfo = res.data;
                }else{
                    this.$tip(res.msg);
                }
            })
        },
        // 拨打电话
        makeCall(){
            window.location.href = 'tel://' + this.orderInfo.kf_phone
        },
        // 删除订单
        delOrder(){
            Dialog.confirm({
                title: '温馨提示',
                message: '您确定要删除该订单吗?',
                confirmButtonText: '删除',
                confirmButtonColor: '#53AB2A'
            }).then(res =>{
                orderdel({
                    token: localStorage.getItem('token'),
                    order_id: this.orderInfo.id
                }).then(data =>{
                    this.$tip(data.msg);
                    if(data.code == 1){
                        setTimeout(() =>{
                            this.$router.go(-1)
                        },1200)
                    }
                })
            }).catch(err =>{
            })
        },
        // 取消订单
        cancelOrder(){
            Dialog.confirm({
                title: '温馨提示',
                message: '您确定要取消该订单吗?',
                confirmButtonColor: '#53AB2A'
            }).then(res =>{
                ordercancel({
                    token: localStorage.getItem('token'),
                    order_id: this.orderInfo.id
                }).then(data =>{
                    this.$tip(data.msg);
                    if(data.code == 1){
                        this.orderInfo.order_status = 0;
                    }
                })
            }).catch(err =>{
            })
        },
        // 去支付
        toPay(){
            let data= {
                order_no: this.orderInfo.order_no,
                pay_money: this.orderInfo.total_price
            }
            this.$router.replace('/orderPay?info='+JSON.stringify(data))
        },
        // 去评价
        toEva(){
            let item = this.orderInfo
			 this.$router.push({name:'Evaluate',params:item});
        },
        // 去消费
        toUse(){
            this.$router.push('/writeoffcode?id=' + this.orderInfo.id)
        },
        // 时间戳转换
        timeChange(timeinfo) {
            var date = new Date(timeinfo * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0' +date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); 
            return Y+M+D+h+m+s;
        },
    },
}
</script>
<style lang="less" scoped>
.orderDetail{
    min-height: 100vh;
    background-color: #f5f5f5;
    .tops{
        height: 1.8rem;
        padding: 0 0.5rem;
        background:linear-gradient(90deg,rgba(80,165,42,1),rgba(90,175,51,1),rgba(92,190,48,1));
        .title{
            font-size: 0.36rem;
            line-height: 120%;
            font-weight: bold;
        }
        .note{
            margin-top: 0.24rem;
            font-size: 0.32rem;
            line-height: 120%;
        }
    }
    // 商品信息
    .goods_infos{
        padding: 0.3rem;
        background-color: #fff;
		.blue{
			color: blue !important;
		}
        .head{
            font-size: 0.28rem;
            line-height: 120%;
            color: #333;
        }
        .goods_box{
            margin-top: 0.3rem;
            .goods_img{
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 0.1rem;
            }
            .goods_info{
                margin-left: 0.2rem;
                .title{
                    font-size: 0.28rem;
                    line-height: 150%;
                    color: #333;
                }
                .spec{
                    margin-right: auto;
                    font-size: 0.24rem;
                    line-height: 120%;
                    color: #999;
                }
                .others{
                    .price{
                        font-size: 0.28rem;
                        line-height: 120%;
                        color: #ee1a1c;
                    }
                    .num{
                        font-size: 0.28rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
            }
        }
        .totals{
            margin-top: 0.3rem;
            font-size: 0.28rem;
            line-height: 120%;
            color: #333;
            .total_price{
                font-size: 0.36rem;
                line-height: 120%;
                color: #ee1a1c;
            }
        }
    }
    // 出行日期
    .time{
        height: 0.84rem;
        padding: 0 0.3rem;
        font-size: 0.3rem;
        line-height: 0.84rem;
        color: #333;
        background-color: #fff;
    }
    // 联系信息
    .link_infos{
        padding: 0.3rem;
        background-color: #fff;
        .head{
            font-size: 0.3rem;
            line-height: 120%;
            font-weight: bold;
            color: #333;
        }
        .link{
            margin-top: 0.3rem;
            font-size: 0.28rem;
            line-height: 120%;
            color: #333;
            .name{
                width: 1.6rem;
                text-align: right;
            }
        }
    }
    .scan_infos{
        padding: 0.3rem;
        background-color: #fff;
        .head{
            font-size: 0.3rem;
            line-height: 120%;
            font-weight: bold;
            color: #333;
        }
        .note{
            margin-top: 0.3rem;
            font-size: 0.28rem;
            line-height: 120%;
            color: #555;
            .name{
                width: 1.4rem;
                text-align: right;
            }
        }
    }
    .order_infos{
        padding: 0.3rem 0.3rem 0;
        background-color: #fff;
        p{
            margin-top: 0.24rem;
            font-size: 0.26rem;
            line-height: 120%;
            color: #777;
            .name{
                width: 1.4rem;
                text-align: right;
            }
        }
        .make_call{
            height: 0.9rem;
            margin-top: 0.3rem;
            border-top: 1px solid #ededed;
            img{
                width: 0.34rem;
                height: 0.34rem;
            }
            span{
                margin-left: 0.14rem;;
                font-size: 0.28rem;
                line-height: 120%;
                color: #666;
            }
        }
    }
    // 底部按钮
    .bottom_acts{
        width: 100%;
        height: 0.98rem;
        margin-top: 0.2rem;
        .bottom_act{
            width: 100%;
            max-width: 750px;
            height: 0.98rem;
            margin: 0 auto;
            padding: 0 0.3rem;
            position: fixed;
            z-index: 100;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #e0e0e0;
            background-color: #fff;
            .act{
                width: 1.52rem;
                height: 0.54rem;
                margin: auto 0 auto 0.2rem;
                border-radius: 0.27rem;
                border: 1px solid #c9c9c9;
                font-size: 0.26ren;
                line-height: calc(0.54rem - 2px);
                color: #333;
            }
            .act.active{
                border-color: #5AAF33;
                color: #5AAF33;
            }
        }
    }
}
</style>